<template>
  <div class="content-sidebar">
    <el-menu active-text-color="#ffd04b" text-color="#fff" background-color="#464c5b" class="el-menu-vertical-demo" :default-openeds="defaultActive" @open="handleOpen" @close="handleClose">
      <template v-for="(item,index) in menuList" :key="item.id">
        <el-sub-menu :index="index+''">
          <template #title>
<!--            <img style="width: 30px;height: 30px" :src="item.icon" alt="">-->
            <span>{{item.label }}</span>
          </template>
          <el-menu-item-group>
            <template v-for="childrenItem in item.children" :key="childrenItem.id">
              <el-menu-item @click="menuClick(childrenItem)" :index="childrenItem.id">
                {{childrenItem.label}}
              </el-menu-item>
            </template>
          </el-menu-item-group>
        </el-sub-menu>
      </template>

    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import {
  FolderOpened
} from '@element-plus/icons-vue'
import {_getMenuList} from "../../http/api.js";
import {ElMessage} from "element-plus";

const route = useRoute();
const router = useRouter();
const menuList = ref([
  /*{
    label:'证件审核',
    children:[
      { label:'人员证件审核', component:'/index/cardCheck' },
      { label:'车辆证件审核', component:'/index/carCheck' },
    ]
  },
  {
    label:'证件申请',
    children:[
      { label:'人员证件申请', component:'/index/applyCard' },
      { label:'车辆证件申请', component:'/index/carApplyCard' },
    ]
  },
  { label:'证件管理',
    component:'',
    children:[
      { label:'证件类型管理', component:'/index/cardManagement' },
    ]
  },
  {
    label:'机构管理',
    component:'',
    children:[
      { label:'机构管理', component:'/index/group' },
    ]
  },
  {
    label: '系统设置',
    children: [
      { label: '角色管理', component: '/index/userrole'},
      { label: '表单配置', component: '/index/formList'},
      { label: '额度配置', component: '/index/quota'},
      { label: '证件类型配置', component: ''},
      { label: '操作日志', component: '/index/log'},
      { label: '展会管理', component: '/index/exhibition'},
      { label: '字段管理', component: '/index/fieldConfig'},
      { label: '用户列表', component: '/index/userList'},
      { label: '字段选项管理', component: '/index/boxList'},
    ]
  }*/
])
const defaultActive = ref(['0']);
const loginId = sessionStorage.getItem('loginId');
const menuListLoca = sessionStorage.getItem('menuList');
if(!loginId) {
  ElMessage({message: '操作异常', type: 'error' });
  localStorage.clear();
  sessionStorage.clear();
  router.replace({ path: '/'})
}
if(menuListLoca) {
  menuList.value = JSON.parse(menuListLoca);
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const menuClick = (item) => {
  console.log(item);
  router.push({ path: item.component})
}


</script>

<style scoped>
.content-sidebar{
  height: 100vh;
  user-select: none;
  position: relative;
  background-color: #464c5b;
  transition: width 0.2s;
  box-sizing: border-box;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  overflow-y: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
</style>